<template>
  <div>
    <!-- 头部 -->
    <div class="summarytion">
      <span>
        时间段：
        <el-select
          v-model="period"
          placeholder="全部"
          style="width: 220px"
          @change="periodChange"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </span>
      &#12288;
      <span>
        职能组:
        <el-select v-model="fid" placeholder="请选择" @change="fidChange">
          <el-option
            v-for="item in groupsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </span>
      &#12288;
      <!-- <el-button type="primary" @click="selectSummary()">查询</el-button> -->
      <el-button type="primary" @click="addSummary()">新增总结</el-button>
      <div
        class="plantion_noWork"
        v-if="userInfo.isLeader == 1"
        @click="summaryConfirmed()"
      >
        待确认总结>>>
      </div>
    </div>
    <br />

    <!-- 工作表格 -->
    <div v-for="item in this.summaryPersonal">
      <div class="taskTile">
        <div class="class_taskTile_left">
          <h3>{{ item.userName }}</h3>
          <span>{{ item.groupName }}</span>
        </div>
        <div
          style="color: #00b98d; cursor: pointer"
          @click="dataliClick(item.userId, item.userName, item.groupName)"
        >
          查看全部总结>
        </div>
      </div>
      <div class="tableData">
        <el-table :data="item.summaryRespList" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60"
            fixed="left"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column prop="functionGroupName" label="职能组" width="120" align="center">
          </el-table-column>
          <el-table-column prop="submitterName" label="人员" fixed="left" width="120" align="center">
          </el-table-column> -->
          <el-table-column
            prop="weekPartStr"
            label="计划日期"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="项目名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="pushTime"
            label="上报时间"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="weekPlanMsg"
            label="工作内容"
            width="400"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="projectPercentage"
            label="完成百分比"
            align="center"
            width="100"
          >
            <span slot-scope="scope">{{
              scope.row.projectPercentage != null
                ? scope.row.projectPercentage + "%"
                : ""
            }}</span>
          </el-table-column>
          <el-table-column
            prop="workState"
            label="工作状态"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="weekSummaryMsg"
            label="总结"
            header-align="center"
            align="left"
            width="250"
          >
          </el-table-column>
          <el-table-column
            prop="reviewState"
            label="状态"
            align="center"
            width="100"
          >
            <span slot-scope="scope" v-if="scope.row.id != null">{{
              scope.row.reviewState == 0 || scope.row.reviewState == null
                ? "未确认"
                : "已确认"
            }}</span>
          </el-table-column>
          <el-table-column prop="reviewName" label="确认人" align="center">
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作"
            align="center"
            width="270"
            fixed="right"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  userInfo.isLeader == 0 &&
                  userInfo.name == scope.row.submitterName
                "
              >
                <div v-if="scope.row.planState == 0 && scope.row.id != null">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="updateSummary(scope.row)"
                    >修 改</el-button
                  >
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    @click="deleteSummary(scope.row)"
                    >删 除</el-button
                  >
                </div>
                <div v-else-if="scope.row.id == null">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="empSummary(scope.row)"
                    >工作总结</el-button
                  >
                </div>
                <div
                  v-else-if="
                    scope.row.id != null &&
                    scope.row.reviewState == 0 &&
                    scope.row.planState == 1
                  "
                >
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="updateSummary(scope.row)"
                    >修 改</el-button
                  >
                </div>
              </div>
              <div
                v-if="
                  userInfo.isLeader == 1 &&
                  userInfo.fid == scope.row.fid &&
                  userInfo.crossGroupReview == 0
                "
              >
                <div
                  v-show="
                    scope.row.id == null &&
                    userInfo.name == scope.row.submitterName
                  "
                >
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="empSummary(scope.row)"
                    >工作总结</el-button
                  >
                </div>
                <el-button
                  v-if="
                    userInfo.name == scope.row.submitterName &&
                    scope.row.id != null &&
                    scope.row.reviewState == 0
                  "
                  type="primary"
                  plain
                  size="mini"
                  @click="updateSummary(scope.row)"
                  >修 改</el-button
                >
                <el-button
                  v-if="
                    userInfo.name == scope.row.submitterName &&
                    scope.row.id != null &&
                    scope.row.planState != 1 &&
                    scope.row.reviewState == 0
                  "
                  type="danger"
                  plain
                  size="mini"
                  @click="deleteSummary(scope.row)"
                  >删 除</el-button
                >
                <el-button
                  v-show="scope.row.id != null"
                  type="success"
                  plain
                  size="mini"
                  @click="queren(scope.row)"
                >
                  {{ scope.row.reviewState == 0 ? "确认" : "取消确认" }}
                </el-button>
              </div>
              <div
                v-if="userInfo.isLeader == 1 && userInfo.crossGroupReview == 1"
              >
                <div
                  v-show="
                    scope.row.id == null &&
                    userInfo.name == scope.row.submitterName
                  "
                >
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="empSummary(scope.row)"
                    >工作总结</el-button
                  >
                </div>
                <el-button
                  v-if="
                    userInfo.name == scope.row.submitterName &&
                    scope.row.id != null &&
                    scope.row.reviewState == 0
                  "
                  type="primary"
                  plain
                  size="mini"
                  @click="updateSummary(scope.row)"
                  >修 改</el-button
                >
                <el-button
                  v-if="
                    userInfo.name == scope.row.submitterName &&
                    scope.row.id != null &&
                    scope.row.planState != 1 &&
                    scope.row.reviewState == 0
                  "
                  type="danger"
                  plain
                  size="mini"
                  @click="deleteSummary(scope.row)"
                  >删 除</el-button
                >
                <el-button
                  v-show="scope.row.id != null"
                  type="success"
                  plain
                  size="mini"
                  @click="queren(scope.row)"
                >
                  {{ scope.row.reviewState == 0 ? "确认" : "取消确认" }}
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 新增总结对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogAddSummary"
      center
      width="40%"
      @close="cancel()"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="summaryForm" ref="summaryRef">
        <div v-if="this.category == 'add'">
          <el-form-item
            label="项目名称"
            prop="projectId"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="form.projectId"
              clearable
              placeholder="请选择项目"
              style="width: 70%"
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="工作内容"
            :label-width="formLabelWidth"
            prop="weekPlanMsg"
          >
            <el-input
              type="textarea"
              v-model="form.weekPlanMsg"
              style="width: 70%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="计划日期"
            :label-width="formLabelWidth"
            prop="weekPartStr"
            :rules="{
              required: true,
              message: '计划时间不能为空',
              trigger: 'blur',
            }"
          >
            <el-select
              v-model="form.weekPartStr"
              placeholder="请选择"
              @change="$forceUpdate()"
              style="width: 70%"
            >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="this.category == 'summary' || this.category == 'update'">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
            <el-input
              :disabled="true"
              type="text"
              v-model="form.projectN"
              style="width: 70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="工作内容" :label-width="formLabelWidth">
            <el-input
              :disabled="true"
              type="textarea"
              v-model="form.weekPlanMsg"
              style="width: 70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="计划日期" :label-width="formLabelWidth">
            <el-input
              :disabled="true"
              type="textarea"
              v-model="form.weekPartStrUpdate"
              style="width: 70%"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item
          label="完成百分比"
          :label-width="formLabelWidth"
          prop="projectPercentage"
        >
          <el-input
            type="text"
            v-model="form.projectPercentage"
            style="width: 70%"
          ></el-input
          >&#12288;%
        </el-form-item>
        <el-form-item
          label="工作状态"
          :label-width="formLabelWidth"
          prop="workState"
        >
          <el-input
            type="text"
            v-model="form.workState"
            style="width: 70%"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作总结" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.weekSummaryMsg"
            style="width: 70%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button
          type="primary"
          @click="submitSummary('summaryRef')"
          v-show="this.category == 'add'"
          >确 定</el-button
        >
        <el-button
          type="primary"
          @click="Summarysub('summaryRef')"
          v-show="this.category == 'summary'"
          >确 定</el-button
        >
        <el-button
          type="primary"
          @click="SummaryUpdate('summaryRef')"
          v-show="this.category == 'update'"
          >确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  userProgressProjects,
  companyPlan,
  selectFunctionGroupList,
  savePlanAndSummary,
  empSummaryList,
  empSummaryReview,
  empPlanAddSummary,
  updateEmpSummary,
  deleteEmpSummary,
  empSummaryPersonal,
} from "@/service/Api.js"; //接口
export default {
  data() {
    return {
      summaryPersonal: [],
      title: "",
      category: "",
      period: "",
      fid: "",
      groupName: "",
      options: [],
      groupsList: [],
      tableData: [],
      projectList: [],
      form: {
        weekPartStr: "",
      },
      projectId: "",
      projectName: "",
      weekPlanId: "",
      weekPlanMsg: "",
      projectPercentage: "",
      workState: "",
      state: "",
      weekSummaryMsg: "",
      dialogAddSummary: false,
      formLabelWidth: "110px",
      value: "",
      pageObj: {
        size: 10,
        total: 0,
        height: "75vh",
        currentPage: 1,
        func: (currentPage) => {
          this.pageTurning(currentPage);
        },
      },
      id: "",
      pn: 1,
      ps: 10,
      userInfo: {},
      projectN: "",
      planFlag: "",
      summaryForm: {
        projectId: [{ required: true, message: "请选择项目", trigger: "blur" }],
        projectIds: [
          { required: true, message: "请选择项目", trigger: "blur" },
        ],
        weekPlanMsg: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        weekPlanMsgs: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        projectPercentage: [
          { required: true, message: "请输入完成百分比", trigger: "blur" },
        ],
        workState: [
          { required: true, message: "请输入工作状态", trigger: "blur" },
        ],
      },
    };
  },
  // watch() {
  //   close()
  // },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.fid = this.userInfo.fid;
    this.weekDate();
    this.groups();
    // this.dataList();
  },
  methods: {
    //获取周总结时间段
    weekDate() {
      if (this.type == 1) {
        companyPlan((this.type = 1)).then((res) => {
          if (res.code == 0) {
            this.options = res.data;
            // this.form.weekPartStr = res.data[0];
          }
        });
      } else if (this.type == 0) {
        companyPlan((this.type = 0)).then((res) => {
          if (res.code == 0) {
            this.options = res.data;
            this.form.weekPartStr = res.data[3];
          }
        });
      } else {
        companyPlan((this.type = 0)).then((res) => {
          if (res.code == 0) {
            this.options = res.data;
            if (this.period == "") {
              this.period = res.data[3];
            }
            this.options.unshift("全部");
            this.dataList();
          }
        });
      }
    },

    //查询按钮
    selectSummary() {
      this.type = -1;
      this.weekDate();
      //this.dataList();
    },

    fidChange() {
      this.selectSummary();
    },
    periodChange() {
      this.selectSummary();
    },

    //分页查询员工总结列表
    dataList() {
      // debugger
      if (this.period == "全部" && this.fid == "") {
        let data = {
          planDateStr: "",
          fids: 0,
        };
        empSummaryPersonal(data).then((res) => {
          if (res.code == 0) {
            this.summaryPersonal = res.data;
            console.log(this.summaryPersonal);
          }
        });
      } else if (this.period == "全部") {
        let data = {
          planDateStr: "",
          fids: this.fid,
        };
        empSummaryPersonal(data).then((res) => {
          if (res.code == 0) {
            this.summaryPersonal = res.data;
            console.log(this.summaryPersonal);
          }
        });
      } else if (this.fid == "") {
        let data = {
          planDateStr: this.period,
          fids: 0,
        };
        empSummaryPersonal(data).then((res) => {
          if (res.code == 0) {
            this.summaryPersonal = res.data;
            console.log(this.summaryPersonal);
          }
        });
      } else {
        let data = {
          planDateStr: this.period,
          fids: this.fid,
        };
        empSummaryPersonal(data).then((res) => {
          if (res.code == 0) {
            this.summaryPersonal = res.data;
          }
        });
      }
    },

    //   翻页
    pageTurning(currentPage) {
      this.pageObj.currentPage = currentPage;
      this.pn = currentPage;
      this.dataList();
    },
    handleSizeChange(val) {
      this.ps = val;
      this.dataList();
    },

    //获取职能组列表
    groups() {
      let userInfo = sessionStorage.getItem("userInfo");
      let id = JSON.parse(userInfo).id;
      selectFunctionGroupList(id).then((res) => {
        if (res.code == 0) {
          this.groupsList = res.data;
          let f;
          let arr = [];
          res.data.forEach((item) => {
            arr.push(item.id);
            f = arr.join(",");
          });
          let list = [
            {
              id: f,
              name: "所有职能组",
            },
          ];
          list.push(...res.data);
          this.groupsList = list;
          this.groupsList.forEach((item) => {
            if (item.id == this.fid) {
              this.groupName = item.name;
            }
          });
          if (res.data.length > 0) {
            let userInfo = sessionStorage.getItem("userInfo");
            if (JSON.parse(userInfo).fid == 0) {
              this.fid = f;
            } else {
              this.fid = JSON.parse(userInfo).fid;
            }
            this.islead = JSON.parse(userInfo).isLeader;
          }
          //this.dataList();
        }
      });
    },

    //清空
    clear() {
      this.form = {};
      this.$nextTick(() => {
        this.$refs.summaryRef.clearValidate();
      });
    },

    cancel() {
      this.clear();
      this.selectSummary();
      this.dialogAddSummary = false;
    },

    //打开新增总结对话框
    addSummary() {
      this.title = "新增总结";
      this.category = "add";
      this.type = 0;
      this.weekDate();
      userProgressProjects().then((res) => {
        if (res.code == 0) {
          this.projectList = res.data;
          if (res.data > 0) {
            this.projectId = res.data[0].id;
            this.projectName = res.data[0].name;
          } else {
            this.projectId = "";
          }
        }
      });
      this.dialogAddSummary = true;
    },
    submitSummary(summaryRef) {
      this.$refs[summaryRef].validate((valid) => {
        if (valid) {
          let data = {
            projectId: this.form.projectId,
            weekPartStr: this.form.weekPartStr,
            weekPlanMsg: this.form.weekPlanMsg,
            projectPercentage: this.form.projectPercentage,
            workState: this.form.workState,
            weekSummaryMsg: this.form.weekSummaryMsg,
          };
          savePlanAndSummary(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.message,
                type: "success",
              });
            }
          });
          this.clear();
          this.selectSummary();
          this.dialogAddSummary = false;
        }
      });
    },

    //工作总结
    empSummary(row) {
      this.title = "工作总结";
      this.category = "summary";
      this.type = 0;
      this.weekDate();
      this.form = JSON.parse(JSON.stringify(row));
      this.form.weekPartStrUpdate = row.weekPartStr;
      this.form.projectN = JSON.parse(JSON.stringify(row.projectName));
      this.dialogAddSummary = true;
    },
    Summarysub(summaryRef) {
      this.$refs[summaryRef].validate((valid) => {
        if (valid) {
          let data = {
            projectPercentage: this.form.projectPercentage,
            workState: this.form.workState,
            weekSummaryMsg: this.form.weekSummaryMsg,
            weekPlanId: this.form.weekPlanId,
          };
          empPlanAddSummary(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.message,
                type: "success",
              });
            }
          });
          this.selectSummary();
          this.clear();
          this.dialogAddSummary = false;
        }
      });
    },

    //修改工作总结
    updateSummary(row) {
      this.category = "update";
      // this.type = 0;
      // this.weekDate();
      this.form = JSON.parse(JSON.stringify(row));
      this.form.weekPartStrUpdate = row.weekPartStr;
      this.planFlag = row.planFlag;
      this.id = this.form.id;
      if (this.id == null) {
        this.title = "修改计划和总结";
        userProgressProjects().then((res) => {
          if (res.code == 0) {
            this.projectList = res.data;
            if (res.data > 0) {
              this.projectId = res.data[0].id;
              this.projectName = res.data[0].name;
            } else {
              this.projectId = "";
            }
          }
        });
      } else {
        this.title = "修改总结";
        this.form.projectN = row.projectName;
      }
      this.weekPlanId = row.weekPlanId;
      this.dialogAddSummary = true;
    },
    SummaryUpdate(summaryRef) {
      this.$refs[summaryRef].validate((valid) => {
        if (valid) {
          let data = {
            id: this.id,
            projectPercentage: this.form.projectPercentage,
            workState: this.form.workState,
            weekSummaryMsg: this.form.weekSummaryMsg,
            weekPlanId: this.form.weekPlanId,
          };
          updateEmpSummary(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.message,
                type: "success",
              });
            }
            this.selectSummary();
            this.clear();
            this.dialogAddSummary = false;
          });
        }
      });
    },

    //删除员工计划和总结
    deleteSummary(row) {
      this.$confirm("确认删除此总结吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.id = row.id;
          deleteEmpSummary(this.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.selectSummary();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //确认总结
    queren(row) {
      if (row.id == null) {
        this.$message({
          message: "请先确认计划!",
          type: "warning",
        });
      } else {
        if (row.reviewState == 0 || row.reviewState == null) {
          let data = {
            id: row.id,
            state: 1,
          };
          empSummaryReview(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "已确认",
                type: "success",
              });
              this.selectSummary();
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          });
        } else {
          let data = {
            id: row.id,
            state: 0,
          };
          empSummaryReview(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "已取消确认",
                type: "success",
              });
              this.selectSummary();
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          });
        }
      }
    },

    dataliClick(uid, userName, groupName) {
      this.$router.push({
        path: "/summaryLog",
        query: {
          type: 1,
          uid: uid,
          name: userName,
          groupName: groupName,
        },
      });
    },

    summaryConfirmed() {
      this.$router.push({
        path: "/summaryLog",
        query: {
          type: 2,
          name: this.userInfo.name,
          groupName: this.groupName,
          fidId: this.userInfo.fid,
        },
      });
    },
  },
};
</script>

<style>
.summarytion {
  display: flex;
  /* justify-content: space-between; */
}

.taskTile {
  display: flex;
  align-items: center;
  margin: 10px 20px 0 20px;
  padding: 0 10px;
  border: 1px solid #e8eef5;
  background: #f9f9f9;
  border-bottom: 0px;
  height: 50px;
  justify-content: space-between;
}

.class_taskTile_left {
  display: flex;
  align-content: center;
  justify-content: flex-start;
}

.taskTile i {
  font-size: 22px;
  color: #34b79a;
}

.taskTile h3 {
  margin-right: 25px !important;
}

.tableData {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.plantion_noWork {
  color: #e40712;
  cursor: pointer;
  padding-top: 15px;
  margin-left: 20px;
}
</style>
